<template>
  <div class="div-main">
    <div>
      <mt-header title="订单填写" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div class="ticket-info">
      <div class="ticket-info-mpmc">
        <span>{{mpmc}}</span>
      </div>
      <div class="ticket-info-mpjg">
        <span style="color:#ff9800;font-size: 10px;">¥</span>
        <span style="color:#ff9800;">{{mpjg}}</span>
        <span style="rgb(156, 154, 151);font-size: 14px;">/张</span>
      </div>
      <div style="clear: both;"></div>
    </div>
    <div class="ticket-count">
      <div class="buynumber">购买数量：</div>
      <div class="countnumber">

        <span id="count_jian" href="javascript:void(0);" @click="countjian()" class="minus" style="padding:0px 10px;background:#eeeeee;">-</span>
        <span>{{count}}</span>
        <span id="count_jia" href="javascript:void(0);" @click="countjia()" class="plus" style="padding:0px 10px;">+</span>

      </div>
      <div style="clear: both;"></div>
    </div>
    <div class="ticket-contacts">
      <div>
        <mt-field label="姓名：" placeholder="请输入姓名" v-model="username"></mt-field>
      </div>
      <div>
        <mt-field label="手机号：" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
      </div>
    </div>
    <div class="bottom">
      <div>
        <span class="span-payonline">产品价格</span>
        <span class="span-symbol">¥</span>
        <span class="span-money">{{cpzjg*count}}</span>
      </div>
      <div @click="creatOrder()">提交订单</div>
      <div style="clear: both;"></div>
    </div>

  </div>
</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      mpid: this.$route.query.mpid,
      yxms: this.$route.query.yxms, //1.无需用户指定日期  2.需要用户指定日期
      jqId: this.$route.query.jqId, //景区id
      jdId: this.$route.query.jdId, //景点id
      todayInfo: this.$route.query.todayInfo,
      mpmc: this.$route.query.mpmc,
      mpjg: this.$route.query.mpjg,
      username: "",
      phone: "",
      cyrs: [
        { mc: "", dh: "", sfz: "", gj: "", selectsfz: "", csrq: "", xb: "" }
      ],
      cpzjg: this.$route.query.mpjg,
      count: 1
    };
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  mounted() {},
  methods: {
    goBack() {
      history.go(-1);
    },
    creatOrder() {
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      let newcyrs = JSON.stringify(this.cyrs);
      let submitprice = this.cpzjg * this.count;
      axios({
        method: "post",
        url: "/api/mp/createOrder.htm",
        params: {
          userId: global_members_id,
          productId: this.mpid,
          yxms: this.yxms, //1.无需用户指定日期  2.需要用户指定日期
          jqId: this.jqId, //景区id
          jdId: this.jdId, //景点id
          todayInfo: this.todayInfo,
          stationId: 15,
          stationname: "敦煌",
          numberInfo: this.count,
          ykxxsz: 1,
          mc: this.username,
          dh: this.phone,
          tgyId: "",
          lxsuserid: "",
          sfz: "",
          dz: "",
          cyrs: newcyrs
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          console.log(res.data);
          this.$router.push({
            path: "/payorder",
            query: {
              mpmc: this.mpmc,
              mpjg: this.mpjg,
              count: this.count,
              mc: this.username,
              dh: this.phone,
              ddbh: res.data.ddbh,
              ddid: res.data.ddid,
              hj: res.data.hj,
              state: res.data.state,
              xdsj: res.data.xdsj,
              zfsx: res.data.zfsx
            }
          });
        } else {
          Indicator.close();
          let instance = Toast({
            message: "下单失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    countjian() {
      this.count = this.count - 1;
      if (this.count < 1) {
        this.count = 1;
      }
    },
    countjia() {
      this.count = this.count + 1;
      if (this.count > 9999) {
        this.count = 9999;
      }
    },
    submitorder() {
      let submitprice = this.cpzjg * this.count;
    }
  }
};
</script>
<style scoped>
.div-main {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.buynumber {
  float: left;
}
.countnumber {
  float: right;
  display: inline-block;
  position: relative;
  border: 0.02rem solid #c7cdd4;
}
.bottom {
  position: absolute;
  z-index: 82;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 1rem;
}
.span-payonline {
  color: #999;
  font-size: 13px;
}
.span-symbol {
  color: #ff9800;
  font-size: 13px;
}
.span-money {
  color: #ff9800;
  font-size: 20px;
}
.bottom > :nth-child(1) {
  float: left;
  width: 50%;
  height: 100%;
  padding-top: 20px;
  text-align: center;
}

.bottom > :nth-child(2) {
  float: left;
  width: 50%;
  height: 100%;
  background: #ff9800;
  color: #fff;
  font-size: 20px;
  padding-top: 18px;
  text-align: center;
}
.ticket-info {
  font-size: 20px;
  margin: 5px;
}
.ticket-info-mpmc {
  float: left;
}
.ticket-info-mpjg {
  float: right;
}
.ticket-count {
  border-top: 10px solid #eeeeee;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 20px;
}
.ticket-contacts {
  border-top: 10px solid #eeeeee;
}
</style>
